<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单元素</title>
	</head>
	<body>
		<!--表单：采集用户信息，并提交到服务器
		    表单元素：form
		    input元素：采集用户信息的元素
			必须type属性   属性值   text      文本框
			                       password  密文文本框
								   submit    提交    form表单控制
								   button    按钮 结合JS、value【html4】
								   reset     重置    form表单控制
								   color     颜色控件
								   datetime-local本地日历控件
								   date      年月日插件
								   time      时间插件
								   week      周插件
								   range     滑块
								   file      上传文件
								   radio     单选框  结合name属性
								   checkbox  复选框  
							    ---checked   默认选择【单复选框】
								   image     图片按钮 结合src属性
								   hidden    隐藏 结合JS
			-->
		<h1>登录页面</h1>
		<form>
			<h4>表单元素：控件元素</h4>
		账号：<input type="text"/><br><br>
		<input>
		密码：<input type="password"/><br><br>
		<input type="submit"/>
		<input type="button"value="自定义按钮"/>
		<!--html5写法  结合JS-->
		<button>触发按钮</button>
		<input type="reset"/>
		<input type="color">
		<input type="datetime-local" />
		<input type="date" />
		<input type="time" />
		<input type="week" />
		<input type="range"/>
		<input type="file" />
		男<input type="radio"name="sex" />
		女<input type="radio"name="sex" />
		<input type="checkbox" />榴莲
		<input type="checkbox" />芒果干
		<input type="checkbox" checked/>火鸡面
		<input type="image" src="img/1.png"/>
		<input type="hidden" />
		<h4>表单元素：多行文本元素  cols行属性   rows列属性</h4>
		建议：<textarea cols="20" rows="10"></textarea>
		<h4>表单元素：下拉列表：范围内的数据 </h4>
		<!--  层级元素  快捷键：select>option-->
		发车时间：<select >
			<option>00:00--24:00</option>
			<option>00:00--06:00</option>
			<option>06:00--12:00</option>
			<option>12:00--18:00</option>
			<option>18:00--24:00</option>
		       </select>
		    <h4>表单元素：细节元素 </h4>
			<!--  层级元素  快捷键：details>summary+div-->
			<details>
				<summary>征婚启示</summary>
				<div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim rerum debitis iure molestiae similique iusto nesciunt illo cupiditate quidem eum tempora at ducimus facere odit, totam, deserunt soluta obcaecati cumque.
				At reiciendis fugiat sit obcaecati quo pariatur cum quidem, consectetur deserunt ut debitis laudantium aperiam excepturi sunt voluptatum nostrum impedit voluptates, doloremque expedita. Error minus in alias consectetur autem dolor.
				Minima magni, laudantium voluptatibus numquam tenetur, veniam suscipit aspernatur provident incidunt nihil vero quis quasi eos sequi ullam corporis perferendis expedita voluptas velit dolor optio deserunt dolore consectetur! Harum, optio.
				Quas saepe voluptatem voluptatibus officia provident incidunt eius excepturi, blanditiis repudiandae dolorem maiores quo cum, vel mollitia tempora. Molestiae dolorem ut veritatis. Perspiciatis, optio rerum! Aliquid deserunt quis odit blanditiis!</div>
			</details>
		</form>
		<h1>新元素</h1>
		周五<mark>放假啦</mark>
		<!--度量元素  必须属性 value="0~1 默认值 min属性 max属性"-->
		电量：<meter value="0.5"></meter>
	</body>
</html>